<!DOCTYPE html>
<#assign base=springMacroRequestContext.getContextUrl("")>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/viewOutline/sample.css">
    <title>监控管理</title>

    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="stylesheet" type="text/css" href="${base}/glrStatic/viewOutline/easyui.css" switch="switch-style">
	<link rel="stylesheet" type="text/css" href="${base}/glrStatic/viewOutline/layui.css">

	<link id="layuicss-laydate" rel="stylesheet" href="${base}/glrStatic/viewOutline/laydate.css" media="all">
	<link id="layuicss-layer" rel="stylesheet" href="${base}/glrStatic/viewOutline/layer.css" media="all">
	<link id="layuicss-skincodecss" rel="stylesheet" href="${base}/glrStatic/viewOutline/code.css" media="all"></head>

	<!--
	<script type="text/javascript" src="http://120.55.162.191/plug-in/ckplayer/ckplayer.js"></script>
	<script type="text/javascript" src="http://www.gloriasmart.com:9090/ics/files/ckplayer/ckplayer.js"></script>
	<script type="text/javascript" src="http://www.gloriasmart.com/ckplayer/ckplayer.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/ckplayer/ckplayer.js"></script>
	-->

	<script type="text/javascript" src="http://www.gloriasmart.com/ckplayer/ckplayer.js"></script>

	<style type="text/css">
		.video-js{
			width:100%!important;
			height:100%!important;
		}
	</style>

	<script>
        var XAccessToken='${AccessToken}';
	</script>

</head>

<body marginwidth="0" marginheight="0" style="background: #343434;" onunload="checkLeave()">
	<div class="bodyLeft">
		<div class="sortScreen">
			<div class="cutScreen">
				监控管理
			</div>
			<div class="wrap-screen">
 				<select class="sortSelect">
		    		<option class="optionColor" value="1">1 × 1</option>
		    		<option class="optionColor" value="4" selected="">2 × 2</option>
		    		<option class="optionColor" value="9">3 × 3</option>
		    		<option class="optionColor" value="16">4 × 4</option>
		    	</select>
			</div>
	    </div>
        <div class="eachCtrol2">
            <div class="titleMessage">
				云台控制
            </div>
            <div class="wrap-ctrlBox">
	            <div class="ctrolBox">
	                <table class="nineButton left" cellpadding="0" border="0" style="margin-top: -1px;
	                    margin-left: -1px; float: left;">
	                    <tbody><tr>
	                        <td>
	                            <input type="button" class="btn" value="" name="4">
	                            <input type="button" class="btn" value="" name="0">
	                            <input type="button" class="btn" value="" name="6">
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>
	                            <input type="button" class="btn" value="" name="2">
	                            <input type="button" class="btn" value="" name="111">
	                            <input type="button" class="btn" value="" name="3">
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>
	                            <input type="button" class="btn" value="" name="5">
	                            <input type="button" class="btn" value="" name="1">
	                            <input type="button" class="btn" value="" name="7">
	                        </td>
	                    </tr>
	                </tbody></table>
	                <table cellpadding="0" class="sixButton left" border="0" style="margin-top: 4px;
	                    margin-left: 8px; float: left;">
	                    <tbody><tr>
	                        <td>
	                            <input type="button" class="btn2" value="" name="8">
	                            <input type="button" class="btn" value="" title='<t:mutiLang langKey="zoom"/>'>
	                            <input type="button" class="btn2" value="" name="9">
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>
	                            <input type="button" class="btn2" value="" name="10">
	                            <input type="button" class="btn" value="" title='<t:mutiLang langKey="zoom"/>'>
	                            <input type="button" class="btn2" value="" name="11">
	                        </td>
	                    </tr>
	                    <tr style="background: #0F4046;">
	                        <td style="height:31px;">

	                        </td>
	                    </tr>
	                </tbody></table>
	            </div>
            </div>
        </div>
        <div class="eachCtrol3">
            <div class="titleMessage">
				监控点
            </div>
            <div id="divVideo" class="menuBoxs" style="height: 228px;">
	            <!--
	            <div class="Ips" style="position:relative;" index="0" name="C61959514" liveAddress="liveAddressC61959514">创业园大楼北门监控</div>
	            <div class="Ips" style="position:relative;" index="1" name="C61959522" liveAddress="liveAddressC61959522">创业园东门出入口监控</div>
	            <div class="Ips" style="position:relative;" index="2" name="C61959237" liveAddress="liveAddressC61959237">望城花园东侧小广场监控</div>
	            <div class="Ips" style="position:relative;" index="3" name="C61959510" liveAddress="liveAddressC61959510">大学路与黄河路交叉口监控</div>
	             -->
            </div>
        </div>
        <div class="eachCtrol4">
            <img src="${base}/glrStatic/viewOutline/cutPic.png" title='<t:mutiLang langKey="screenshots"/>' class="catPic" style="display:none;">
        </div>
        <div class="wrap-forest">
	        <div class="eachCtrol5">
	           	<input type="text" class="pointer" placeholder='请输入预置点' style="width:130px;margin-left:20px;padding-left:5px;color:#fff;">
	            <input type="button" value='添加' style="width:40px;" class="addPointer">
	            <select class="getPointer" style="width:80px;margin-top:10px;margin-left:20px;color: #fff;">
	                <option><t:mutiLang langKey="please.choose"/></option>
	            </select>
	            <input type="button" value='调用' class="setPointer" style="margin-top:10px;width:40px;">
	            <input type="button" value='删除' class="clearPointer" style="margin-top:10px;width:40px;">
           </div>
        </div>
    </div>

    <div class="players">
    	<table style="border-spacing: 2px 0px;">
    		<tbody><tr>
    			<td class="videoView">
    				<div id="playercontainer0" index="0" class="initPlayer player" >

    				</div>
    			</td>
    			<td class="videoView"><div id="playercontainer1" index="1" class="initPlayer player" ><p class="font_text"></p></div></td>
    		</tr>
    		<tr>
    			<td class="videoView"><div id="playercontainer2" index="2" class="initPlayer player" ><p class="font_text" ></p></div></td>
    			<td class="videoView"><div id="playercontainer3" index="3" class="initPlayer player" ><p class="font_text" ></p></div></td>
    		</tr>
    	</tbody></table>
    </div>

	<script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.1.10.2.min.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/viewOutline/layui.all.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/viewOutline/ajax.js"></script>
	<script type="text/javascript" src="${base}/glrStatic/viewOutline/cyberplayer.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/VideoControl.js"></script>
	<script type="text/javascript">
	  $(function () {
	      var bodyHeight = $(document.body).height() - 385;
	      $(".menuBoxs").css("height", bodyHeight);
	  });
	</script>

</body>
</html>